<template>
  <el-date-picker
    v-if="componentName == 'el-date-picker'"
    v-model="data"
    v-bind="inputAttrs"
    v-on="elInputOn"
  ></el-date-picker>
  <el-cascader v-else-if="componentName == 'el-cascader'" v-model="data" v-bind="inputAttrs"></el-cascader>
  <component v-else :is="componentName" v-model="data" v-bind="inputAttrs">
    <slot>
      <template v-if="componentName == 'el-select'">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </template>
      <template v-else-if="componentName == 'el-radio-group'">
        <el-radio
          v-for="(item, index) in options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-radio
        >
      </template>
      <template v-else-if="componentName == 'el-checkbox-group'">
        <el-checkbox
          v-for="(item, index) in options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-checkbox
        >
      </template>
      <template v-else-if="componentName == 'el-checkbox'">{{ options.text }}</template>
    </slot>
  </component>
</template>

<script setup name="jax-input">
import _ from 'lodash-es'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: [Object, String, Number, Boolean, Array],
  type: { type: String, default: 'input' }, // Input 类型
  options: [Array, String],
})

const attrs = useAttrs()
const data = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

// 组件命(驼峰)
const componentName = computed(() => {
  const components = {
    input: 'el-input',
    textarea: 'el-input',
    select: 'el-select',
    radio: 'el-radio',
    cascader: 'el-cascader',
    checkbox: 'el-checkbox',
    switch: 'el-switch',
    upload: 'jax-upload',
    uploadImage: 'jax-upload',
    uploadImages: 'jax-upload',
    uploadFile: 'jax-upload',
    uploadFiles: 'jax-upload',
    uploadVideo: 'jax-upload',
    radioGroup: 'el-radio-group',
    checkboxGroup: 'el-checkbox-group',
    inputNumber: 'el-input-number',
    datePicker: 'el-date-picker',
    datetime: 'el-date-picker',
    timePicker: 'el-time-picker',
  }

  const key = _.camelCase(props.type)

  return components[key] || 'el-input'
})

const inputAttrs = computed(() => {
  const { type, options } = props
  const key = _.camelCase(props.type)

  let inputAttrs = {
    clearable: true,
    options,
  }

  if (['input', 'search'].includes(type)) {
    inputAttrs.maxlength = 128
  }

  if (type == 'search') {
    inputAttrs['prefix-icon'] = 'search'
  } else if (type == 'password') {
    // inputAttrs = {
    //   maxlength: 12,
    //   minlength: 6,
    // }
  } else if (type == 'textarea') {
    inputAttrs = {
      type: 'textarea',
      rows: 4,
      maxlength: 256,
    }
  } else if (type == 'select') {
    inputAttrs.placeholder = '请选择'
  } else if (type == 'datetime') {
    // inputAttrs['format'] = 'YYYY-MM-DD HH:mm:ss' // 标签
    // inputAttrs['value-format'] = 'YYYY-MM-DD HH:mm:ss' // 值
  } else if (key == 'uploadImages') {
    inputAttrs.type = 'images'
  } else if (key == 'uploadVideo') {
    inputAttrs.type = 'video'
  } else if (key == 'uploadFile') {
    inputAttrs.type = 'file'
  }

  return {
    ...inputAttrs,
    ...attrs,
  }
})
</script>

<style lang="scss" scoped></style>
